<!--分页数据模板-->
<template>
  <div class="app-container">
    <vxe-toolbar ref="xToolbar" custom>
      <template #buttons>
        <!--todo 需要动态生成-->
        缓存key：<el-input v-model="condition.dataKey" placeholder="dataKey" style="width: 200px;margin-right: 10px" class="filter-item" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="page()">搜索</el-button>
        <!--todo 需要动态生成-->
        <el-button v-if="checkPermission(['sys:config-data:add'])" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="edit(0)">新增</el-button>
        <el-button v-if="checkPermission(['sys:config-data:delete'])" type="danger" icon="el-icon-close" @click="batchDel()">删除</el-button>
      </template>
    </vxe-toolbar>
    <!--table-->
    <vxe-table
      ref="xTable"
      border
      stripe
      highlight-hover-row
      show-overflow
      resizable
      row-id="id"
      size="normal"
      :data="tableData"
    >
      <vxe-table-column type="checkbox" width="60" />
      <vxe-table-column type="seq" title="序号" width="60" />
      <vxe-table-column field="id" title="ID" />
      <!--todo 需要动态生成-->
      <vxe-table-column field="configTypeId" title="类型ID" />
      <vxe-table-column field="dataType" title="缓存类型" />
      <vxe-table-column field="dataKey" title="缓存key" />
      <vxe-table-column field="dataName" title="数据说明" />
      <vxe-table-column field="dataDescription" title="数据描述" />
      <vxe-table-column field="createTime" title="创建时间" />
      <vxe-table-column field="updateTime" title="修改时间" />
      <vxe-table-column title="操作" fixed="right" width="300">
        <template #default="{row}">
          <!--todo 需要动态生成-->
          <el-button v-if="checkPermission(['sys:config-data:update'])" type="success" size="mini" icon="el-icon-edit" @click="edit(1, row)">修改</el-button>
          <el-button v-if="checkPermission(['sys:config-data:delete'])" type="danger" size="mini" icon="el-icon-close" @click="del(row.id)">删除</el-button>
          <router-link :to="'/sys-config/value/index/' + row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px;">Value</el-button>
          </router-link>
        </template>
      </vxe-table-column>
    </vxe-table>

    <vxe-pager
      background
      size="small"
      :current-page="condition.pageNum"
      :page-size="condition.pageSize"
      :total="condition.totalSize"
      :page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="pageChange"
    />
    <!--edit-->
    <el-dialog :visible.sync="dialogVisible" title="编辑">
      <!--todo 需要动态生成-->
      <el-form>
        <el-form-item label="缓存类型">
          <el-input v-model="form.dataType" placeholder="dataType" />
        </el-form-item>
        <el-form-item label="缓存key">
          <el-input v-model="form.dataKey" placeholder="dataKey" />
        </el-form-item>
        <el-form-item label="数据说明">
          <el-input v-model="form.dataName" placeholder="dataName" />
        </el-form-item>
        <el-form-item label="数据描述">
          <el-input v-model="form.dataDescription" placeholder="dataDescription" />
        </el-form-item>
        <el-form-item label="数据类型">
          <el-input v-model="form.valueType" placeholder="valueType" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <!--todo 需要动态生成-->
        <el-button v-if="checkPermission(['sys:config-data:add','sys:config-data:update'])" type="primary" @click="edit(2)">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import {
  addConfigData,
  delConfigData,
  updateConfigData,
  getConfigData,
  pageConfigData
} from '@/api/sys/config/data'

export default {
  data() {
    return {
      dialogVisible: false,
      // 表数据
      tableData: [],
      // 条件数据
      condition: {
        pageSize: 10,
        pageNum: 1,
        totalSize: 0,
        configTypeId: '',
        dataType: '',
        dataKey: '',
        dataName: '',
        dataDescription: ''
      },
      // 添加表单数据
      form: {
        id: -1,
        configTypeId: '',
        dataType: '',
        dataKey: '',
        dataName: '',
        dataDescription: '',
        valueType: ''
      }
    }
  },
  created() {
    // 获取路由传递的id
    this.condition.configTypeId = this.$route.params && this.$route.params.id
    this.form.configTypeId = this.condition.configTypeId
    // 初始化分页
    this.page()
    // 将表格和工具栏进行关联
    this.$nextTick(() => {
      const $table = this.$refs.xTable
      $table.connect(this.$refs.xToolbar)
    })
  },
  methods: {
    add(data) {
      console.log('add-data:' + JSON.stringify(data))
      addConfigData(data).then(response => {
        this.$message({ type: 'success', message: response.msg })
        this.page()
      })
    },
    del(id) {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delConfigData(id).then(response => {
          this.$message({ type: 'success', message: response.msg })
          this.page()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    update(data) {
      updateConfigData(data).then(response => {
        this.$message({ type: 'success', message: response.msg })
        this.page()
      })
    },
    get(id) {
      getConfigData(id).then(response => {
        this.form = response.data
      })
    },
    page() {
      pageConfigData(this.condition).then(response => {
        this.tableData = response.data.list
        this.condition.totalSize = response.data.total
      })
    },
    pageChange({ currentPage, pageSize }) {
      this.condition.pageNum = currentPage
      this.condition.pageSize = pageSize
    },
    edit(type, row) {
      // 0 增加 1 修改  2 保存增加/修改
      if (type === 0) {
        // this.form = { id: -1 , configTypeId: this.form.configTypeId}
        this.dialogVisible = true
      } else if (type === 1) {
        getConfigData(row.id).then(response => {
          console.log(JSON.stringify(response.data))
          this.form = response.data
          this.dialogVisible = true
        })
      } else if (type === 2) {
        this.form.state = 0
        if (this.form.id > 0) {
          this.update(this.form)
        } else {
          this.add(this.form)
        }
        this.dialogVisible = false
        this.page()
      }
    },
    batchDel() {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const selectRecords = this.$refs.xTable.getCheckboxRecords()
        for (let i = 0; i < selectRecords.length; i++) {
          delConfigData(selectRecords[i].id).then(response => {
            console.log(response)
          })
        }
        this.$message({ type: 'success', message: 'ok' })
        this.page()
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    checkPermission // 验证权限
  }
}
</script>
